<template>
  <a-drawer title="配置情报列表" style="height: 100%" :width="650" :mask="false" placement="left"
    :wrap-style="{ position: 'absolute' }" :visible="visible" getContainer=".miwenBox" @close="close">
    <div class="mingwenBox">
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
        <div class="mode_item">
          <a-form-model-item label="情报状态">
            <a-select v-model="formData.intelligenceStatus" placeholder="请选择">
              <a-select-option value="0">全部</a-select-option>
              <a-select-option value="1">已研判</a-select-option>
              <a-select-option value="2">未研判</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="命中规则">
            <a-select v-model="formData.type" placeholder="请选择">
              <a-select-option value="4">全部</a-select-option>
              <a-select-option value="1">号码归属地</a-select-option>
              <a-select-option value="2">访问信源</a-select-option>
              <a-select-option value="3">维文dx</a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
        <div class="mode_item mode_item_none">
          <a-form-model-item label="更新时间" class="zdy-form-item-label">
            <a-radio-group buttonStyle="solid" v-model="formData.num">
              <a-radio-button v-for="(item, key) in options" :key="key" :value="item.value">
                {{ item.text }}
              </a-radio-button>
            </a-radio-group>
            <a-range-picker v-if="formData.num === '5'" :allowClear="true" v-model="rangePickerTime"
              valueFormat="YYYY-MM-DD" @change="rangePickerChange"
              style="margin-left: 10px;width: 44%;display: inline-block;" />
          </a-form-model-item>
        </div>
      </a-form-model>
    </div>
    <div class="btnBox">
      <a-button class="b1" type="primary" :disabled="isDisabled" @click="onAdd">发起案事件</a-button>
      <div class="b2">
        <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
        <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
      </div>
    </div>
    <div class="mingwen-table">
      <CustomTable ref="table" :showAlert="false" :columns="columns" :dataSource="pageData" :showSelection="true"
        :showPagination="true" :customRow="clickCustomRow" @selectedRow="onSelectedRow" rowKey="id" :loading="loading"
        @change="onTableChange">
        <template slot="intelligenceStatus" slot-scope="text">
          <span class="text_color_1" v-if="text == 1">未研判 </span>
          <span class="text_color_2" v-if="text == 2">已研判</span>
        </template>
        <template slot="phone" slot-scope="text, record">
          <span>{{ text }}</span>
          <a-tag v-if="record.isJoin == 1" style="margin-top:10px;" color="red">首次入琼</a-tag>
        </template>
        <template slot="updateTime" slot-scope="text">
          <span>{{ formatTime(text) }}</span>
        </template>
      </CustomTable>
    </div>
    <!--页面来源pageType， 1：案事件管理 2：任务情报列表 3： 配置情报列表 4： 重点人列表 5：任务情报管理 6：种子号码列表 7：协查函列表、8 审批列表   10 负样本人员库 11 时空碰撞 -->
    <AddCaseModal ref="addCaseModalId" title="新增案事件" :pageType="3" :targetData="selectRows" moduleType="intelligence"
      @close="addCaseClose" />
  </a-drawer>
</template>

<script>
import * as api from '@/api/wxSmuggle/intelligence.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
import AddCaseModal from '@/views/wxSmuggle/modules/AddCaseModal'
import { querySimpleByPhoneList } from '@/utils/util'
import moment from 'moment'
export default {
  props: ['visible'],
  components: {
    CustomTable,
    AddCaseModal
  },
  data() {
    return {
      options: [
        { value: '1', text: '今天' },
        { value: '3', text: '近三天' },
        { value: '4', text: '近七天' },
        { value: '5', text: '自定义' }
      ],
      formData: {},
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '情报号码',
          dataIndex: 'phone',
          width: 150,
          scopedSlots: { customRender: 'phone' }
          // customRender: t => <j-ellipsis value={t} length={10} />
        },
        {
          title: '模型名称',
          dataIndex: 'modelName',
          width: 110,
          scopedSlots: { customRender: 'modelName' }
        },
        {
          title: '情报状态',
          dataIndex: 'intelligenceStatus',
          width: 90,
          scopedSlots: { customRender: 'intelligenceStatus' }
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          // width: 160,
          scopedSlots: { customRender: 'updateTime' }
        }
      ],
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
      rangePickerTime: [],
      isDisabled: true,
      selectRows: [],
      loading: false
    }
  },
  mounted() {
    this.$set(this.formData, 'num', '1')
    this.refreshTable()
  },
  methods: {
    onSelectedRow(rows) {
      this.selectRows = rows
      this.isDisabled = rows.length > 0 ? false : true
    },
    formatTime(str) {
      return moment(new Date(str)).format('YYYY-MM-DD HH:mm:ss')
    },
    onAdd() {
      this.$refs.addCaseModalId.show()
    },
    onSearch() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.formData = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.rangePickerTime = []
      this.$set(this.formData, 'num', '1')
      this.refreshTable()
    },
    refreshTable() {
      let formData = Object.assign({}, this.formData, this.pageFilter)
      this.loading = true
      api.crypoIntellList(formData).then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            //判断是否是负样本号码，并添加负样本标签(电话号码字段：phoneNumber传1，phone传2，msisdn传3)
            // if (this.pageData) {
            //   querySimpleByPhoneList(this, 2, this.pageData.records)
            // }
          } else {
            this.$message.warn(res.message)
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    rangePickerChange(date) {
      this.$set(this.formData, 'startTime', date[0])
      this.$set(this.formData, 'endTime', date[1])
    },
    clickCustomRow(record, index) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {
            this.$emit('clickRow', record)
          }
        }
      }
    },
    addCaseClose() {
      this.$refs.table.onClearRowKeys()
    },
    close(value) {
      this.$emit('close', value)
    }
  }
}
</script>

<style lang="less" scoped>
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;

  >div {
    flex: 0 0 50%;
  }

  &>* {
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0;
  }

  &.mode_item_none {
    >div {
      flex: inherit;
    }

    /deep/.ant-col-17 {
      width: 88% !important;
    }
  }

  .zdy-form-item-label {
    /deep/.ant-form-item-label {
      width: 70px;
    }

    &.xzqh-form-item-label {
      /deep/.ant-form-item-control-wrapper {
        .ant-form-item-children {
          display: -webkit-box;
        }
      }

      /deep/.area-select {
        // margin-top: 4px;
        line-height: 1;
      }

      /deep/.select-tag {
        width: 162px !important;
        margin-left: 10px;
        margin-top: 3px;
      }
    }

    /deep/.ant-col-17 {}
  }
}

.mingwenBox /deep/.ant-col-5 {
  width: 22.833333%;
}

.mingwen-table /deep/.ant-table-row {
  cursor: pointer;
}

/deep/.ant-drawer-header {
  background-color: #f2f2f2 !important;
}

.btnBox {
  margin: 20px 0;
  overflow: hidden;

  .b1 {
    float: left;
  }

  .b2 {
    float: right;
  }
}

.text_color_1 {
  color: #d9011c;
}

.text_color_2 {
  color: #71b604;
}
</style>
